import { getOfflinePlanPersonDetail } from '@/api/OfflineStudy';
import { DATEFORMAT } from '@/common';
import { DatePicker, Descriptions } from 'antd';
import dayjs from 'dayjs';
import { useState } from 'react';
import { YmTable } from 'ym-design';
interface DataType {
  key: string;
  phone: string;
  signInTime: number;
  signOutTime: string;
}
function OfflinePersonDetail({ planCourseId }: { planCourseId: string }) {
  //时间选择
  const [timeD, _timeD] = useState<any>(dayjs().format('YYYY-MM-DD'));
  const [signRule, setSignRule] = useState<any>();
  //数据展示
  const [items, setItems] = useState([
    {
      label: '可学人数',
      value: 0,
    },
    {
      label: '已学人数',
      value: 0,
    },
    {
      label: '未学人数',
      value: 0,
    },
    {
      label: '学习率',
      value: '0%',
    },
  ]);
  //表格
  const columns: any = [
    {
      title: '姓名',
      dataIndex: 'personName',
      key: 'personName',
    },
    {
      title: '手机号',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: '签到时间',
      dataIndex: 'signInTime',
      key: 'signInTime',
      render(_value: any) {
        return signRule == 1 ? <span>无需签到 </span> : <span>{_value || '未签到'}</span>;
      },
    },
    {
      title: '签退时间',
      key: 'signOutTime',
      dataIndex: 'signOutTime',
      render(_value: any) {
        return signRule == 1 || signRule == 2 ? <span>无需签退 </span> : <span>{_value || '未签退'}</span>;
      },
    },
  ];

  const disabledDate: any = (current: any) => {
    return current && current >= dayjs().endOf('day');
  };
  return (
    <Descriptions
      title=""
      labelStyle={{ width: 72, justifyContent: 'flex-end' }}
      column={1}
      className="ym_descriptions"
    >
      <Descriptions.Item label="" span={1}>
        <DatePicker
          disabledDate={disabledDate}
          onChange={(e) => {
            const datetime = e.format(DATEFORMAT);
            _timeD(datetime);
          }}
          defaultValue={dayjs(timeD, DATEFORMAT)}
        />
      </Descriptions.Item>
      <Descriptions.Item label="" span={1}>
        <div className="flexr alc jub">
          {items.map((v: any, i: number) => {
            return (
              <div className="flexr alc" key={i} style={{ marginRight: 32 }}>
                <div>{v.label}：</div>
                <div>{v.value}</div>
              </div>
            );
          })}
        </div>
      </Descriptions.Item>
      <Descriptions.Item label="" span={1}>
        <div style={{ height: 'calc(100vh - 260px)' }}>
          <YmTable
            toolBar={false}
            columns={columns}
            request={async ({ page }, form = {}) => {
              const { pageNum = 1, pageSize = 10 } = page ?? {};
              const data = await getOfflinePlanPersonDetail({
                pageIndex: pageNum,
                pageSize,
                planCourseId,
                date: timeD || undefined,
              });
              setItems([
                {
                  label: '可学人数',
                  value: data.countData.allNum,
                },
                {
                  label: '已学人数',
                  value: data.countData.studyNum,
                },
                {
                  label: '未学人数',
                  value: data.countData.unStudyNum,
                },
                {
                  label: '学习率',
                  value: data.countData.studyRate + '%',
                },
              ]);
              setSignRule(data.signRule);
              return { list: data.list || [], total: data.total };
            }}
            requestOptions={{
              reFreshDep: [planCourseId, timeD],
            }}
            rowKey="id"
            className="drawer-table"
          ></YmTable>
        </div>
      </Descriptions.Item>
    </Descriptions>
  );
}

export default OfflinePersonDetail;
